<template>
  <view class="withdraw-container">
    <!-- 顶部统计区域 -->
    <view class="stats-section">
      <view class="stats-row">
        <view class="stats-item">
          <view class="stats-value">{{
            formatNumber(paymoneyData.total_revenue)
          }}</view>
          <view class="stats-label">店铺总收入</view>
        </view>
        <view class="stats-item">
          <view class="stats-value">{{
            formatNumber(paymoneyData.total_offline_revenue)
          }}</view>
          <view class="stats-label">线下总收入</view>
        </view>
        <view class="stats-item">
          <view class="stats-value">{{
            formatNumber(paymoneyData.total_online_revenue)
          }}</view>
          <view class="stats-label">线上总收入</view>
        </view>
      </view>
      <view class="stats-row">
        <view class="stats-item">
          <view class="stats-value">{{
            formatNumber(paymoneyData.withdrawable_amount)
          }}</view>
          <view class="stats-label">可提现金额</view>
        </view>
        <view class="stats-item">
          <view class="stats-value">{{
            formatNumber(paymoneyData.amount_withdrawn)
          }}</view>
          <view class="stats-label">已提现金额</view>
        </view>
        <view class="stats-item">
          <view class="stats-value">{{
            formatNumber(paymoneyData.frozen_amount)
          }}</view>
          <view class="stats-label">冻结中金额</view>
        </view>
      </view>
    </view>

    <!-- 提现记录标题栏 -->
    <view class="record-header">
      <text class="record-title">
        <text class="record-title-text">提现记录</text>
      </text>
      <view class="view-all-container" @click="toSetting">
        <image
          src="@/static/switch_tabs/u88.svg"
          class="view-all-icon"
          mode="fill"
        />
        <text class="view-all">提现设置</text>
      </view>
    </view>

    <!-- 提现记录列表 -->
    <scroll-view
      class="record-list"
      scroll-y
      @scrolltolower="handleScrollToLower"
    >
      <!-- 提现记录项 - 审核中 -->
      <div v-if="moneyRecondList.length === 0" class="empty-order">
        <gui-image
          src="https://cdn.duyumy.com/accessory/0fe61301ec884459440a85e2fcd72d1ae98c46da.png"
        ></gui-image>
        <div style="font-size: 28rpx; color: #999; margin-top: -20rpx">
          暂无提交记录~
        </div>
      </div>
      <template v-for="item in moneyRecondList" :key="item.id">
        <view class="record-item" @click="lookPayInfo(item)">
          <view class="record-left">
            <image class="bank-icon" :src="compuLogo(item)"></image>
            <view class="record-info">
              <view class="record-bank"
                >提现到{{
                  item.withdrawal_type === 1
                    ? item.information["所属银行"]
                    : "支付宝"
                }}</view
              >
              <view class="record-time">{{ item.create_time }}</view>
              <view
                class="record-time"
                style="margin-top: 6rpx"
                v-if="item.remark"
                >{{ item.remark }}</view
              >
            </view>
          </view>
          <view class="record-right">
            <view
              class="record-status"
              :style="{ color: compuStatus(item.status)?.color }"
              >{{ compuStatus(item.status)?.name }}</view
            >
            <view class="record-amount">¥ {{ item.amount_paid }}</view>
          </view>
        </view>
      </template>
    </scroll-view>

    <!-- 底部提现按钮 -->
    <view class="bottom-action">
      <button class="withdraw-btn" @tap="handleWithdraw">发起提现</button>
    </view>

    <view class="approval-popup" v-if="showPopup">
      <view class="popup-mask" @tap="closePopup"></view>
      <view class="popup-content">
        <view class="popup-title">
          <view v-for="item in Object.keys(payCardInformation.information)" style="display: flex;margin: 10rpx 0;">
            <span class="info-label">{{ item }}：</span>
            <span class="info-value">{{ payCardInformation.information[item] }}</span>
          </view>
          <view class="lookInfo" v-if="[3,4].includes(payCardInformation.status)">失败原因：{{ payCardInformation.remark }}</view>
        </view>
        
        <button class="close-btn" @tap="closePopup">关闭</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from "vue";
import { onShow } from "@dcloudio/uni-app";
import {
  getPayMoneyData as getPayMoneyDataApi,
  getPayMoneyRecord,
  getBankLogo,
} from "@/apiShop/paymoney.js";
import { formatNumber, showToast } from "@/utils/helper.js";
const paymoneyData = ref({});
const getPayMoneyData = async () => {
  const res = await getPayMoneyDataApi();
  paymoneyData.value = res;
};

const compuLogo = computed(() => {
  return (item) => {
    return item.withdrawal_type === 1
      ? bankLogoList.value[item.information["所属银行"]]
      : "/static/switch_tabs/u61.svg";
  };
});
const query = ref({
  status: "",
  page: 1,
  limit: 30,
});
const moneyRecondList = ref([]);
const getPayMoneyRecordList = async (type = "init") => {
  const res = await getPayMoneyRecord(query.value);
  if (res.data.length === 0) return showToast("没有更多数据了");
  if (type === "init") return  moneyRecondList.value = res.data
  moneyRecondList.value = [...moneyRecondList.value, ...res.data];
};

const bankLogoList = ref({});
const getBankLogoList = async () => {
  const res = await getBankLogo();
  bankLogoList.value = res;
};

const toSetting = () => {
  uni.navigateTo({
    url: "/pagesShop/paymoney/setting",
  });
};

const compuStatus = computed(() => {
  return (status) => {
    switch (status) {
      case 0:
        return {
          name: "待审核",
          color: "#007aff",
        };
      case 1:
        return {
          name: "审核成功",
          color: "#ff9500",
        };
      case 2:
        return {
          name: "打款成功",
          color: "#4cd964",
        };
      case 3:
        return {
          name: "审核不通过",
          color: "#ff3b30",
        };
      case 4:
        return {
          name: "打款失败",
          color: "#ff3b30",
        };
      default:
        return {
          name: "未知",
          color: "#ccc",
        };
    }
  };
});

const handleScrollToLower = async () => {
  query.value.page++;
  await getPayMoneyRecordList("more");
};
const showPopup = ref(false);
const payCardInformation = ref({
  information:{}
});
const lookPayInfo = (item) => {
  showPopup.value = true;
  payCardInformation.value = item
};
const closePopup = () => {
  showPopup.value = false
}
onShow(async () => {
  await getPayMoneyData();
  await getPayMoneyRecordList("init");
  await getBankLogoList();
});

// 处理提现按钮点击
const handleWithdraw = () => {
  uni.navigateTo({
    url: `/pagesShop/paymoney/apply?money=${paymoneyData.value.withdrawable_amount}`,
  });
};
</script>

<style lang="scss" scoped>
.withdraw-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
}

/* 顶部统计区域样式 */
.stats-section {
  background-color: #fff;
  padding: 30rpx 20rpx;
}

.stats-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30rpx;
}

.stats-row:last-child {
  margin-bottom: 0;
}

.stats-item {
  flex: 1;
  text-align: center;
}

.stats-value {
  font-size: 32rpx;
  font-weight: bold;
  color: #4a90e2;
  margin-bottom: 10rpx;
}

.stats-label {
  font-size: 24rpx;
  color: #999;
}

/* 提现记录标题栏样式 */
.record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 20rpx;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.record-title {
  border-width: 0px;
  background: inherit;
  background-color: rgba(255, 255, 255, 0);
  border: none;
  border-radius: 0px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-family: "黑体", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #409eff;
}
.record-title-text {
  padding: 10rpx;
  border-left: 4rpx solid #409eff;
}

.view-all {
  font-family: "黑体", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 24rpx;
  color: #f59a23;
}

/* 提现记录列表样式 */
.record-list {
  flex: 1;
  background-color: #fff;
  overflow: hidden;
}

.record-item {
  display: flex;
  justify-content: space-between;
  padding: 30rpx 20rpx;
  border-bottom: 1px solid #f5f5f5;
}

.record-left {
  display: flex;
  align-items: center;
}

.bank-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 20rpx;
  background-color: #f5f5f5;
}

.record-info {
  display: flex;
  flex-direction: column;
}

.record-bank {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.record-time {
  font-size: 24rpx;
  color: #999;
}

.record-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}

.record-status {
  font-size: 24rpx;
  margin-bottom: 10rpx;
}

.record-amount {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.record-remark {
  padding: 20rpx;
  font-size: 24rpx;
  color: #999;
  background-color: #f9f9f9;
  border-bottom: 1px solid #f5f5f5;
}

/* 底部提现按钮样式 */
.bottom-action {
  padding: 20rpx;
  background-color: #fff;
  border-top: 1px solid #eee;
}

.withdraw-btn {
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  background-color: #007aff;
  color: #fff;
  border-radius: 45rpx;
  font-size: 32rpx;
}
.view-all-container {
  display: flex;
  flex-wrap: nowrap;
  gap: 10rpx;
  align-items: center;
}
.view-all-icon {
  width: 32rpx;
  height: 32rpx;
}

.approval-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;

  .popup-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
  }

  .popup-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    background-color: #ffffff;
    border-radius: 10rpx;
    padding: 40rpx 30rpx;
    display: flex;
    flex-direction: column;
    align-items: center;

    .popup-title {
      font-size: 32rpx;
      color: #333333;
      font-weight: 500;
      margin-bottom: 30rpx;
      text-align: center;
    }

    .popup-info {
      width: 100%;
      margin-bottom: 40rpx;

      .info-item {
        display: flex;
        margin-bottom: 15rpx;

        .info-label {
          font-size: 26rpx;
          color: #666666;
          width: 160rpx;
        }

        .info-value {
          font-size: 26rpx;
          color: #333333;
          flex: 1;
        }
      }
    }

    .close-btn {
      width: 67%;
      background-color: #2196f3;
      color: #ffffff;
      border-radius: 40rpx;
      font-size: 28rpx;
    }
  }
}
.empty-order {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50vh;
  flex-direction: column;
}
.lookInfo{
  display: flex;
  margin: 10rpx 0;
  color: red;
}
</style>
